<template>
  <view class="centent">
    <view class="trade-box-head">
      <view class="overlazy" v-if="overlazyStatus" @click="overlazyTap"></view>
      <!-- 筛选 结束 -->
      <u-sticky :enable="enable">
        <view class="item solid-top">
          <view>商户名</view>
          <view>交易类型</view>
          <view>交易金额</view>
          <view>交易时间</view>
        </view>
      </u-sticky>
    </view>
    <!-- 数据详情 -->
    <view class="trade-box-body">
      <view v-if="tradeList.length > 0">
        <view class="itemList">
          <view
            class="itemDetail solid-bottom"
            v-for="(item, index) in tradeList"
            :key="index"
          >
            <view class="flex align-center justify-center">{{
              item.mercNm
            }}</view>
            <view class="flex align-center justify-center">{{
              item.txnCd
            }}</view>
            <view class="flex align-center justify-center"
              >+{{ $tools.format(item.txnAmt) }}</view
            >
            <view class="flex align-center justify-center">{{
              item.txnTm
            }}</view>
          </view>
        </view>
      </view>
      <!-- 暂无数据 -->
      <view class="noMachine" v-if="tradeList.length == 0 && isLoad">
        <image
          src="../../static/images/noData/zwjl.png"
          mode="widthFix"
        ></image>
        <view style="color: #c0c4cc">暂无交易数据</view>
      </view>
    </view>
    <u-back-top :scroll-top="scrollTop"></u-back-top>
    <u-toast ref="uToast" />
    <u-loadmore
      :status="status"
      @loadmore="loadmore"
      style="padding: 40rpx 0"
      v-if="tradeList.length > 0"
    />
    <toast></toast>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabBarList: [],
      enable: true,
      scrollTop: 0,
      borderTop: false,

      overlazyStatus: false,
      pageNumber: 25,
      page: 1,
      tradeList: [],
      isLoad: false,
      status: "loadmore",
      noMore: false,
	  
	  searchUserId:'',
	  searchDate:'',
    };
  },
  onLoad(options) {
    this.tabBarList = this.$tabbar.tabbar;
	this.searchUserId = options.userId;
	this.searchDate = options.dayData
	this.getTradeList();
  },
  onShow() {
    this.enable = true;
  },
  onHide() {
    this.enable = false;
  },
  methods: {
    //获取交易列表
    getTradeList() {
      this.isLoad = false;
      this.$u.api
        .tradeList({
          cur_page: this.page,
          page_num: this.pageNumber,
          begin_date: this.searchDate,
          end_date: this.searchDate,
          txnCd: '',
          keyword: '',
		  user_id:this.searchUserId
        })
        .then((res) => {
          var datas = res.result.list;
          if (this.page == 1 && datas.length == 0) {
            this.noMore == true;
            this.status = "nomore";
          }
          if (this.page == 1 && datas.length < this.pageNumber) {
            this.noMore == true;
            this.status = "nomore";
          }
          if (this.page > 1 && datas.length < this.pageNumber) {
            this.noMore == true;
            this.status = "nomore";
          }
          if (this.page > 1 && datas.length == this.pageNumber) {
            this.status = "loading";
          }
          this.tradeList = this.tradeList.concat(datas);
          this.isLoad = true;
          uni.stopPullDownRefresh();
        })
		.catch((res) => {
			if (res.errMsg == "request:fail timeout") {
				this.$u.toast("请求超时，请重试!");
			} else if (res.errMsg == "request:fail") {
				this.$u.toast("请求失败，请重试");
			} else {
				 this.$u.toast("请求失败，请重试");
			}
			this.$loading(false);
			setTimeout(() => {
				this.$u.route({
					type: "navigateBack",
					delta: 1,
				});
			}, 2000);
		});
    },

    // 点击下载更多
    loadmore() {
      if (this.noMore) {
        this.status = "nomore";
      } else {
        this.page = ++this.page;
        this.status = "loadmore";
        this.getTradeList();
      }
    },
    // 下拉触底
    onReachBottom() {
      if (this.noMore) {
        // this.$u.toast('没有更多订单了');
        this.status = "nomore";
      } else {
        this.status = "loading";
        this.page = ++this.page;
        this.getTradeList();
      }
    },
    onPullDownRefresh() {
      this.page=1;
      this.tradeList=[];
      this.isLoad=false;
      this.status="loadmore";
      this.noMore=false;
      this.getTradeList();
    },
    onPageScroll(e) {
      this.scrollTop = e.scrollTop;
    },
    overlazyTap() {
      this.overlazyStatus = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.filter {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0rpx 40rpx;
  font-size: 26rpx;
  line-height: 80rpx;
  font-family: numberfont;
  background-color: #fb4535;
  color: #fff;
  z-index: 9;
}

.filterBtn {
  position: relative;
  margin-right: 20rpx;
}

.filterBtn picker::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -20rpx;
  display: block;
  transform: translateY(-40%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid #fff;
}

.line {
  margin: 0 20rpx;
  width: 30rpx;
  height: 4rpx;
  background-color: #fff;
}

.filterTradeTypeBox {
  position: relative;
}

.filterTradeTypeBox::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -20rpx;
  display: block;
  transform: translateY(-40%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid #fff;
}

.filterSearchInput {
  padding: 0 20rpx;
  background-color: #fff;
  overflow: hidden;
  position: relative;
  z-index: 9;

  input {
    height: 80rpx;
    font-size: 28rpx;
    float: left;
    width: 530rpx;
  }

  button {
    height: 60rpx;
    line-height: 60rpx;
    font-size: 28rpx;
    display: block;
    float: right;
    margin-top: 10rpx;
    background-color: #fb4535;
    color: #fff;

    &::after {
      border: none;
    }
  }
}

.overlazy {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 8;
  background: rgba(0, 0, 0, 0.5);
}

.sum {
  display: flex;
  justify-content: space-around;
  padding: 60rpx 0;
  background-color: #fb4535;
  color: #fff;
}

.title {
  text-align: center;
  line-height: 40rpx;
}

.title view:last-child {
  font-size: 40rpx;
  font-weight: 700;
  font-family: numberfont;
  letter-spacing: 5rpx;
}

.item {
  display: flex;
  background-color: #fb4535;
  color: #fff;
  line-height: 60rpx;
}

.item > view {
  flex: 1;
  text-align: center;
}

.itemDetail {
  display: flex;
  align-items: center;
  height: 80rpx;
  line-height: 80rpx;
  font-family: numberfont;
}

// .itemDetail text {
// 	text-align: center;
// 	width: 25%;
// 	display: inline-block;
// }
.itemDetail > view {
  width: 25%;
  padding: 10rpx 5rpx;
  float: left;
  line-height: 30rpx;
  height: 90rpx;
  overflow: hidden;
  text-align: center;
  font-size: 28rpx;
}
</style>
